<div bsModal #createOrEditModal="bs-modal" (onShown)="onShown()" class="modal fade" tabindex="-1" role="dialog"
  aria-labelledby="createOrEditModal" aria-hidden="true" [config]="{ backdrop: 'static', keyboard: !saving }">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form *ngIf="active" #userForm="ngForm" novalidate autocomplete="off">
        <div class="modal-header">
          <h4 class="modal-title">
            <span>关键过程外包申请变更通知单</span>
          </h4>
          <button type="button" class="close" (click)="close()" [attr.aria-label]="l('Close')" [disabled]="saving">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body" style="height: 500px; overflow: auto;">
          <p-tabView [activeIndex]="index" (onChange)="handleChange($event)">
            <p-tabPanel header="申请单">
              <div
                style="border: 1px solid #c7cdd9;margin-bottom: 10px;border-top-left-radius:4px;border-top-right-radius: 4px;">
                <div class="col-xl-12" style="padding-right: 0px; padding-left: 0px;">
                  <div class="form-group m-form__group">
                    <div class="input-group">
                      <input [(ngModel)]="filterText" name="filterText" autoFocus class="form-control m-input"
                        style="border-right: none;" [placeholder]="l('SearchWithThreeDot')" type="text">
                      <span class="input-group-btn">
                        <button (click)="getTasks()" class="btn btn-primary"><i class="flaticon-search-1"
                            [attr.aria-label]="l('Search')"></i></button>
                      </span>
                    </div>
                  </div>
                </div>
                <div class="row" style="overflow: auto;">
                  <div class="align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container">
                      <p-table #dataTable [value]="primengTableHelper.records"
                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}" [paginator]="false" [lazy]="true"
                        [scrollable]="true" ScrollWidth="100%" [responsive]="primengTableHelper.isResponsive"
                        [resizableColumns]="primengTableHelper.resizableColumns">
                        <ng-template pTemplate="header">
                          <tr>
                            <th style="width: 50px">
                              操作</th>
                            <th style="width: 150px" pSortableColumn="code">
                              申请单
                            </th>
                            <th style="width: 150px" pSortableColumn="displayName">
                              申请单位
                            </th>
                            <th style="width: 150px" pSortableColumn="picNo">
                              供方单位
                            </th>
                            <th style="width: 250px" pSortableColumn="portion">
                              申请单类型
                            </th>
                            <th style="width: 200px" pSortableColumn="amount">
                              创建人
                            </th>
                          </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record="$implicit">
                          <tr>
                            <td style="width: 50px">
                              <button pButton type="button" icon="pi pi-plus" class="ui-button-info"
                                style="margin-right: .5em" (click)="SelectTask(record)"></button>
                            </td>
                            <td style="width: 150px">
                              {{record.code}}
                              <div [ngSwitch]="record.applyStatus">
                                <div *ngSwitchCase="">
                                  <div class="m-loader m-loader--warning" style="width: 30px; display: inline-block;">
                                  </div>
                                </div>
                                <div *ngSwitchDefault>
                                  <span *ngIf="record.applyStatus==0" class="label m-badge m-badge--primary m-badge--wide"
                                    data-toggle="tooltip" title="运行" data-placement="top">
                                    运行
                                  </span>
                                  <span *ngIf="record.applyStatus==1" class="label m-badge m-badge--warning m-badge--wide"
                                    data-toggle="tooltip" title="已暂停" data-placement="top">
                                    已暂停
                                  </span>
                                  <span *ngIf="record.applyStatus==2" class="label m-badge m-badge--success m-badge--wide"
                                    data-toggle="tooltip" title="完成" data-placement="top">
                                    完成
                                  </span>
                                  <span *ngIf="record.applyStatus==3" class="label m-badge m-badge--danger m-badge--wide"
                                    data-toggle="tooltip" title="已终止" data-placement="top">
                                    已终止
                                  </span>
                                </div>
                              </div>
                            </td>
                            <td style="width: 150px">
                              {{record.applyUnit}}
                            </td>
                            <td style="width: 150px">
                              {{record.supplierUnit}}
                            </td>
                            <td style="width: 250px">
                              <div [ngSwitch]="record.outsourcingType">
                                <div *ngSwitchCase="">
                                  <div class="m-loader m-loader--warning" style="width: 30px; display: inline-block;">
                                  </div>
                                </div>
                                <div *ngSwitchDefault>
                                  <span *ngIf="record.outsourcingType==0" class="label m-badge m-badge--primary m-badge--wide"
                                    data-toggle="tooltip" title="运行" data-placement="top">
                                    一般过程外协申请
                                  </span>
                                  <span *ngIf="record.outsourcingType==1" class="label m-badge m-badge--warning m-badge--wide"
                                    data-toggle="tooltip" title="已暂停" data-placement="top">
                                    关键过程外协申请
                                  </span> 
                                </div>
                              </div>
                            </td>
                            <td style="width: 200px">
                              {{record.createdUser}}
                            </td>

                          </tr>
                        </ng-template>
                      </p-table>
                      <div class="primeng-no-data" *ngIf="primengTableHelper.totalRecordsCount == 0">
                        {{'NoData' | localize}}
                      </div>
                      <div class="primeng-paging-container">
                        <p-paginator [rows]="primengTableHelper.defaultRecordsCountPerPage" #paginator
                          (onPageChange)="getTasks($event)" [totalRecords]="primengTableHelper.totalRecordsCount">
                        </p-paginator>
                        <span class="total-records-count">
                          {{'TotalRecordsCount' | localize:primengTableHelper.totalRecordsCount}}
                        </span>
                      </div>
                    </div>

                    <!--<Primeng-TurboTable-End>-->
                  </div>
                </div>
              </div>
            </p-tabPanel>
            <p-tabPanel header="变更单">
              <div class="align-items-center">
                <div class="align-items-center" style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                  <div class="row">
                    <div class="form-group col-md-2">
                      <label for="supplierUnit">合格供方单位 *</label>
                    </div>
                    <div class="form-group col-md-10">
                      <p-dropdown [options]="SupplierAyy" name="supplierUnit" #supplierUnitInput="ngModel"
                        [(ngModel)]="_applyChangeMainDto.supplierUnit" [panelStyle]="{minWidth:'12em'}"></p-dropdown>

                      <!-- <input id="supplierUnit" #supplierUnitInput="ngModel" type="text"  class="form-control" [(ngModel)]="_processingOrder.supplierUnit" required maxlength="256" /> -->
                      <validation-messages [formCtrl]="supplierUnitInput">
                      </validation-messages>
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-md-2">
                      <label for="code">申请单编号</label>
                    </div>
                    <div class="form-group col-md-10">
                      <input id="code" #codeInput="ngModel" type="text" name="code" class="form-control"
                        [(ngModel)]="_applyChangeMainDto.code" required maxlength="256" disabled />
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-md-2">
                      <label for="applyUnit">申请单位</label>
                    </div>
                    <div class="form-group col-md-10">
                      <input id="applyUnit" #applyUnitInput="ngModel" type="text" name="applyUnit" class="form-control"
                        [(ngModel)]="_applyChangeMainDto.applyUnit" required maxlength="256" disabled />
                    </div>
                  </div>
                  <div class="row">
                    <div class="form-group col-md-2">
                      <label for="changedCode">变更单编号</label>
                    </div>
                    <div class="form-group col-md-10">
                      <input id="changedCode" #changedCodeInput="ngModel" type="text" name="changedCode"
                        class="form-control" [(ngModel)]="_applyChangeMainDto.changedCode" required maxlength="256"
                        disabled />
                    </div>
                  </div>
                </div>
              </div>

              <div
                style="border: 1px solid #c7cdd9;margin-bottom: 10px;border-top-left-radius:4px;border-top-right-radius: 4px;margin-top: 20px;">
                <div class="row" style="overflow: auto;">
                  <div class="align-items-center">
                    <!--<Primeng-TurboTable-Start>-->
                    <div class="primeng-datatable-container">
                      <p-table #teskdataTable [value]="detailsprimengTableHelper.records"
                        rows="{{primengTableHelper.defaultRecordsCountPerPage}}" editMode='row' dataKey="taskForModelId"
                        [paginator]="false" [lazy]="true" [scrollable]="true" ScrollWidth="100%">
                        <ng-template pTemplate="header">
                          <tr>
                            <th style="width: 100px">
                              操作</th>
                            <th style="width: 150px">
                              任务号
                            </th>
                            <th style="width: 150px">
                              产品图号
                            </th>
                            <th style="width: 150px">
                              产品名称
                            </th>
                            <th style="width: 100px">
                              申请单数量
                            </th>
                            <th style="width: 130px">
                              加工状态
                            </th>
                            <th style="width: 130px">
                              交付进度
                            </th>
                            <th style="width: 230px">
                              变更原因
                            </th>
                            <th style="width: 300px">
                              当前外包产品进度
                            </th>
                            <th style="width: 120px">
                              变更后数量
                            </th>
                          </tr>
                        </ng-template>
                        <ng-template pTemplate="body" let-record let-editing="editing" let-ri='rowIndex'>
                          <tr [pEditableRow]='record'>
                            <td style="width: 100px">
                              <button *ngIf="!editing" pButton type="button" pInitEditableRow icon="pi pi-pencil"
                                [disabled]='record.appliedAmount >= record.outsouringAmount' class="ui-button-info"
                                (click)="onRowEditInit(record)"></button>
                              <button *ngIf="editing" pButton type="button" pSaveEditableRow icon="pi pi-check"
                                class="ui-button-success" style="margin-right: .5em"
                                (click)="onRowEditSave(record)"></button>
                              <button *ngIf="editing" pButton type="button" pCancelEditableRow icon="pi pi-times"
                                class="ui-button-danger" (click)="onRowEditCancel(record, ri)"></button>
                            </td>
                            <td style="width: 150px">
                              {{record.taskCode}}
                            </td>
                            <td style="width: 150px">
                              {{record.picNo}}
                            </td>
                            <td style="width: 150px">
                              {{record.taskName}}
                            </td>
                            <td style="width: 100px">
                              {{record.outsouringAmount}}
                            </td>
                            <td style="width: 130px">
                              {{record.workStatus}}
                            </td>
                            <td style="width: 130px">
                              {{record.deliveryRate | momentFormat:'L'}}
                            </td>
                            <td style="width: 230px">
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <input pInputText type="text" style='width:220px;' name='changeRemark'
                                    [(ngModel)]="record.changeRemark" required>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{record.changeRemark}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                            <td style="width: 300px">
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                  <input pInputText type="text" style='width:290px;' name='currentOutsouringProgress'
                                    [(ngModel)]="record.currentOutsouringProgress" required>
                                </ng-template>
                                <ng-template pTemplate="output">
                                  {{record.currentOutsouringProgress}}
                                </ng-template>
                              </p-cellEditor>
                            </td>
                            <td style="width: 120px">
                              <p-cellEditor>
                                <ng-template pTemplate="input">
                                    <p-spinner size="6"  name="changedAmount" #changedAmountInput="ngModel" [(ngModel)]="record.changedAmount" required></p-spinner> 
                                    <validation-messages [formCtrl]="changedAmountInput"></validation-messages>
                                </ng-template>
                                <ng-template pTemplate="output">
                                    {{record.changedAmount}}
                                </ng-template>
                            </p-cellEditor> 
                            </td>
                          </tr>
                        </ng-template>
                      </p-table>
                      <div class="primeng-no-data" *ngIf="detailsprimengTableHelper.totalRecordsCount == 0">
                        {{'NoData' | localize}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </p-tabPanel>
            <p-tabPanel header="审批人">
              <div style="border: 1px solid #c7cdd9;padding: 0.571em 1em; ">
                <div class="row">
                  <div class="form-group col-md-4">
                    <label for="Code">申请单位经办人 </label>
                  </div>
                  <div class="form-group col-md-8">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='workshopManager' [(ngModel)]="stepusers.workshopManager"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-4">
                    <label for="Code">申请单位主管领导 </label>
                  </div>
                  <div class="form-group col-md-8">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='workShopLeader' [(ngModel)]="stepusers.workShopLeader"
                      [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>

                <div class="row">
                  <div class="form-group col-md-4">
                    <label for="Code">计划生产处型号主管 </label>
                  </div>
                  <div class="form-group col-md-8">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='plannedProductionModelManager'
                      [(ngModel)]="stepusers.plannedProductionModelManager" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
                <div class="row">
                  <div class="form-group col-md-4">
                    <label for="Code">计划生产处主管处长 </label>
                  </div>
                  <div class="form-group col-md-8">
                    <span>{{selectedCar3}}</span>
                    <p-dropdown [options]="users" name='plannedProductionDirector'
                      [(ngModel)]="stepusers.plannedProductionDirector" [group]="true" [filter]='true'>
                      <ng-template let-group pTemplate="group">
                        {{group.label}}
                      </ng-template>
                    </p-dropdown>
                  </div>
                </div>
              </div>
            </p-tabPanel>
          </p-tabView>
        </div>
        <div class="modal-footer">
          <button [disabled]="saving" type="button" class="btn btn-default" (click)="close()">
            取消
          </button>
          <button type="submit" (click)="save()" class="btn btn-primary2" [disabled]="!userForm.form.valid"
            [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
            <i class="fa fa-save"></i> <span>申请</span>
          </button>
        </div>
      </form>
    </div>
  </div>




</div>